<template>
  <div>
    <div class="login-box">
      <div
        style="
          margin-left: 10%;
          margin-top: 10%;
          width: 80%;
          height: 40%;
          border-radius: 20px;
        "
      >
        <!-- <img src="../../static/讨论.png" style="width: 100%" /> -->
      </div>

      <br /><br /><br />
      <Input
        v-model="username"
        placeholder="请输入账号"
        style="width: 60%"
        size="large"
      />
      <br />
      <br />
      <!-- <input v-model="password" placeholder="请输入密码" /><br /> -->
      <Input
        v-model="password"
        type="password"
        password
        placeholder="请输入密码"
        style="width: 60%"
        size="large"
      />
      <br />
      <br />
      <br />
      <div style="margin-left: 15%; float: left; width: 30%; height: 15%">
        <Button
          @click="loginSumbit"
          type="default"
          size="large"
          style="width: 100%"
          >登陆</Button
        >
      </div>
      <div style="margin-left: 10%; float: left; width: 30%; height: 15%">
        <Button @click="gotoReg" type="default" size="large" style="width: 100%"
          >注册</Button
        >
      </div>

      <!-- <button @click="loginSumbit">登陆</button> -->
    </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  name: 'LoginAuth',
  data () {
    return {
      username: '',
      password: ''
      // msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    loginSumbit: function () {
      console.log(123)
      this.username = this.username.trim()
      this.password = this.password.trim()
      if (this.username === '' || this.password === '') {
        alert('请输入用户名和密码!')
      } else {
        var _this = this // 临时变量
        this.$axios({
          method: 'post',
          url: '/login',
          headers: { 'content-type': 'application/x-www-form-urlencoded' },
          params: {
            username: this.username,
            password: this.password
          }
        }).then(function (response) {
          if (response.data.code === 1) {
            console.log(response.data)
            console.log('跳转到登陆前的页面' + _this.$CommonVar.lastUrl)
            _this.$CommonVar.UserInformation = response.data.result
            // console.log(_this.$cookies.get('JSESSIONID'))
            _this.reload()
            if (_this.$CommonVar.lastUrl !== '/') {
              _this.$router.push(_this.$CommonVar.lastUrl)
            } else {
              _this.$router.push('Index')
            }
          } else {
            alert('账号或密码错误!')
          }
        })
      }
    },
    gotoReg: function () {
      this.$router.push('/Register')
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-box {
  margin: 5% auto;
  height: 600px;
  width: 20%;
  background: white;
  border: gray solid 1px;
  border-radius: 30px;
}
</style>
